{% load staticfiles %}
{% load custom_tags %}
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>OPS | 运维系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
    <link rel="stylesheet" href="{% static 'AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css' %}">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{% static 'AdminLTE/bower_components/font-awesome/css/font-awesome.min.css' %}">
    <!-- Ionicons -->
    <link rel="stylesheet" href="{% static 'AdminLTE/bower_components/Ionicons/css/ionicons.min.css' %}">

    {% block head %}

    {% endblock %}

    <!-- Theme style -->
    <link rel="stylesheet" href="{% static 'AdminLTE/dist/css/AdminLTE.min.css' %}">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect. -->
    <link rel="stylesheet" href="{% static 'AdminLTE/dist/css/skins/_all-skins.min.css' %}">
    <!-- Pace style -->
    <link rel="stylesheet" href="{% static 'AdminLTE/plugins/pace/pace.min.css' %}">


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!-- Main Header -->
    <header class="main-header">

        <!-- Logo -->
        {% if user.is_superuser %}
            <a href="{% url 'dashboard' %}" class="logo">
        {% else %}
            <a href="javascript:void(0)" class="logo">
        {% endif %}

        <!-- mini logo for sidebar mini 50x50 pixels -->
        <span class="logo-mini"><b>JR</b></span>
        <!-- logo for regular state and mobile devices -->
        <span class="logo-lg"><b>OPS</b>运维系统</span>
        </a>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <!-- Navbar Right Menu -->
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <!-- User Account Menu -->
                    <li class="dropdown tasks-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-flag-o"></i>
                            <span class="label label-danger">{{ user.self_user.all|union_user_plan:user.attention_user.all|user_plan_count }}</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="header">
                                你有 {{ user.self_user.all|union_user_plan:user.attention_user.all|user_plan_count }}
                                个任务计划未完成
                            </li>
                            <li>
                                <!-- inner menu: contains the actual data -->
                                <ul class="menu">
                                    {% for foo in user.self_user.all|union_user_plan:user.attention_user.all %}
                                        <li><!-- Task item -->
                                            <a href="javascript:void(0)">
                                                <h3>
                                                    {{ foo.title }}
                                                    <small class="pull-right">
                                                        截止日期：{{ foo.end_time|date:"Y-m-d H:i:s" }}</small>
                                                </h3>
                                            </a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                            <li class="footer">
                                <a href="{% url 'user_center' %}">查看所有</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown user user-menu">
                        <!-- Menu Toggle Button -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <!-- The user image in the navbar-->
                            <img src="{{ MEDIA_URL }}{{ user.image }}" class="user-image"
                                 alt="User Image">
                            <!-- hidden-xs hides the username on small devices so only the image appears. -->
                            <span class="hidden-xs">{{ user.username }}</span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- The user image in the menu -->
                            <li class="user-header">
                                <img src="{{ MEDIA_URL }}{{ user.image }}" class="img-circle"
                                     alt="User Image">
                                <p>
                                    上次登录时间
                                    <small>{{ user.last_login|date:"Y-m-d H:i:s" }}</small>
                                </p>
                            </li>

                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="pull-left">
                                    <a href="{% url 'user_center' %}" class="btn btn-default btn-flat">个人中心</a>
                                </div>

                                <div class="pull-left" style="margin-left: 6px">
                                    <a href="{% url 'lock_screen' %}" class="btn btn-default btn-flat">暂时离开</a>
                                </div>
                                <!--
                                <div class="pull-left" style="margin-left: 6px">
                                    <a href="#lockscreen" class="btn btn-default btn-flat inline">暂时离开</a>
                                </div> -->
                                <div class="pull-right">
                                    <a href="{% url 'logout' %}" class="btn btn-default btn-flat">退出用户</a>
                                </div>
                            </li>
                        </ul>
                    </li>

                    <!-- Control Sidebar Toggle Button -->
                    <li>
                        <a href="#" data-toggle="control-sidebar"><i class="fa fa-comments"></i></a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">

        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">

            <!-- Sidebar user panel -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="{{ MEDIA_URL }}{{ user.image }}" class="img-circle" alt="User Image">
                </div>
                <div class="pull-left info">
                    <p>{{ user.username }}</p>
                    <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                </div>
            </div>

            <!-- Sidebar Menu -->
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header">主菜单</li>
                {% if user.is_superuser %}
                    <li><a href="{% url 'dashboard' %}"><i class="fa fa-tachometer"></i><span>仪表盘</span></a></li>
                    <li class="treeview">
                        <a href="#"><i class="fa fa-fw fa-users"></i>
                            <span>用户管理</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="{% url 'user_list' %}"><i class="fa  fa-user"></i> 用户列表</a></li>
                            <li><a href="{% url 'group_list' %}"><i class="fa fa-users"></i> 用户组</a></li>
                            <li><a href="{% url 'user_role_list' %}"><i class="fa fa-unlock-alt"></i> 角色管理</a></li>
                        </ul>
                    </li>
                {% endif %}
                {% if perms.assets.add_assets or perms.assets.add_assetslog %}
                    <li class="treeview">
                        <a href="#"><i class="fa fa-institution"></i> <span>资产管理</span>
                            <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                        </a>
                        <ul class="treeview-menu">
                            {% if perms.assets.add_assets %}
                                <li><a href="{% url 'assets_charts' %}"><i class="fa  fa-pie-chart"></i>资产概览</a></li>
                                <li><a href="{% url 'add_base_asset' %}"><i class="fa fa-wrench"></i>基础配置</a></li>
                                <li><a href="{% url 'add_asset' %}"><i class="fa fa-plus-square"></i>资产录入</a></li>
                                <li><a href="{% url 'pull_asset' %}"><i class="fa fa-cloud"></i>资产拉取</a></li>
                                <li><a href="{% url 'assets_list' %}"><i class="fa fa-list"></i>资产列表</a></li>
                            {% endif %}
                            {% if user.is_superuser %}
                                <li><a href="{% url 'login_record' %}"><i class="fa fa-user-secret"></i>
                                    主机登录日志</a>
                                </li>
                            {% endif %}
                        </ul>
                    </li>
                {% endif %}
                {% if perms.task.add_ansiblemodulelog or perms.task.add_ansibleinventory %}
                    <li class="treeview">
                        <a href="#"><i class="fa fa-fw fa-navicon"></i> <span>任务管理</span>
                            <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                        </a>
                        <ul class="treeview-menu">
                            {% if perms.task.add_ansibleinventory %}
                                <li><a href="{% url 'inventory' %}"><i class="fa fa-gears"></i> 动态主机组</a></li>
                                <li><a href="{% url 'run_module' %}"><i class="fa fa-play"></i> 执行模块</a></li>
                                <li><a href="{% url 'playbook_list' %}"><i class="fa fa-book"></i> playbook管理</a></li>
                                <li><a href="{% url 'role_list' %}"><i class="fa  fa-navicon"></i> role管理</a></li>
                            {% endif %}
                            {% if request.user.is_superuser %}
                                <li><a href="{% url 'run_log' %}"><i class="fa fa-user-secret"></i> 操作日志</a></li>
                            {% endif %}
                        </ul>
                    </li>
                {% endif %}
                {% if perms.fort.ssh_fortserver %}
                    <li class="treeview">
                        <a href="#"><i class="fa fa-fw fa-terminal"></i> <span>连接管理</span>
                            <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                        </a>
                        <ul class="treeview-menu">
                            {% if request.user.is_superuser %}
                                <li><a href="{% url 'fort_server' %}"><i class="fa fa-street-view"></i> 主机用户配置</a></li>
                            {% endif %}

                            {% if perms.fort.ssh_fortserver %}
                                <li><a href="{% url 'ssh_list' %}"><i class="fa fa-location-arrow"></i> 终端连接</a></li>
                            {% endif %}

                            {% if request.user.is_superuser %}
                                <li><a href="{% url 'login_fort_record' %}"><i class="fa fa-user-secret"></i> 登录日志</a>
                                </li>
                            {% endif %}
                        </ul>
                    </li>
                {% endif %}
                {% if perms.projs.add_project or perms.projs.deploy_project %}
                    <li class="treeview">
                        <a href="#"><i class="fa fa-fw fa-github-alt"></i> <span>项目管理</span>
                            <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                        </a>
                        <ul class="treeview-menu">
                            {% if perms.projs.add_project %}
                                <li><a href="{% url 'proj_list' %}"><i class="fa fa-th-large"></i> 项目列表</a></li>
                            {% endif %}
                            <li class="treeview">
                                <a href="#"><i class="fa fa-code-fork"></i> 代码发布
                                    <span class="pull-right-container"><i
                                            class="fa fa-angle-left pull-right"></i></span>
                                </a>
                                <ul class="treeview-menu">
                                    {% if request.user.is_superuser %}
                                        <li><a href="{% url 'proj_config' %}"><i class="fa fa-external-link"></i>
                                            项目配置</a>
                                        </li>
                                    {% endif %}
                                    {% if perms.projs.deploy_project %}
                                        <li><a href="{% url 'config_list' %}"><i class="fa fa-bar-chart"></i> 部署管理</a>
                                        </li>
                                    {% endif %}
                                    {% if request.user.is_superuser %}
                                        <li><a href="{% url 'deploy_log' %}"><i class="fa fa-user-secret"></i> 发布记录</a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </li>
                        </ul>
                    </li>
                {% endif %}


                {% if perms.dbmanager.add_dblog %}
                    <li class="treeview">
                        <a href="#"><i class="fa fa-fw fa-database"></i> <span>数据库管理</span>
                            <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                        </a>
                        <ul class="treeview-menu">
                            {% if user.is_superuser %}
                                <li><a href="{% url 'db_user' %}"><i class="fa fa-users"></i> 数据库用户管理</a></li>
                                <li><a href="{% url 'db_list' %}"><i class="fa fa-wrench"></i> 数据库配置</a></li>
                            {% endif %}
                            <li><a href="{% url 'db_exec' %}"><i class="fa fa-mouse-pointer"></i> 数据库连接</a></li>
                            <li><a href="{% url 'db_log' %}"><i class="fa fa-signal"></i> 操作记录</a></li>
                        </ul>
                    </li>
                {% endif %}


                {% if perms.plan.add_periodictask %}
                    <li class="treeview">
                        <a href="#"><i class="fa fa-fw fa-sliders"></i> <span>任务编排</span>
                            <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="{% url 'schedule_list' %}"><i class="fa fa-clock-o"></i> 调度管理</a></li>
                            <li><a href="{% url 'task_list' %}"><i class="fa fa-star"></i> 任务管理</a></li>
                            <li><a href="{% url 'task_result' %}"><i class="fa fa-retweet"></i> 运行日志</a></li>
                        </ul>
                    </li>
                {% endif %}

                {% if perms.wiki.add_post %}
                    <li class="treeview">
                        <a href="#"><i class="fa fa-fw fa-battery-three-quarters"></i> <span>知识库</span>
                            <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="{% url 'wiki_add' %}"><i class="fa fa-mortar-board"></i> 新增文章</a></li>
                            <li><a href="{% url 'wiki_list' %}"><i class="fa fa-file-text-o"></i> 文章列表</a></li>
                            <li><a href="{% url 'wiki_file_list' %}"><i class="fa fa-cloud-upload"></i> 文件共享</a></li>
                        </ul>
                    </li>
                {% endif %}
                {% if user.is_superuser %}
                    <li><a href="{% url 'system_log' %}"><i class="fa fa-file-o"></i><span>系统操作日志</span></a></li>
                {% endif %}
            </ul>
            <!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        {% if request.path != '/users/user_center/' and 'assets_search' not in request.path %}
            <section class="content-header">
                <h1></h1>
                <ol class="breadcrumb">
                    <li><a href="javascript:void(0);"><i class="fa fa-dashboard"></i> 仪表盘</a></li>
                    <li><a href="javascript:void(0);"></a></li>
                    <li class="active"></li>
                </ol>
            </section>
        {% endif %}

        <!-- Main content -->
        <section class="content container-fluid">
            {% block content %}

            {% endblock %}
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 1.0.0
        </div>
        <!-- Default to the left -->
        <strong>Copyright &copy; 2018 <a href="#">Company</a>.</strong> All rights reserved.
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-light">
        <div class="tab-pane" id="control-sidebar-home-tab">
            <h3 class="control-sidebar-heading" style="text-align: center">用户列表</h3>
            <ul class="control-sidebar-menu" id="user-list" style="margin-left: 0">
                {% for user_info in request.session.user_infos %}
                    {% if user_info.user_id != request.user.id %}
                        <li data-username="{{ user_info.username }}">
                            <a href="javascript:void(0)">
                                {% if user_info.login_status == 0 %}
                                    <img src="{{ MEDIA_URL }}{{ user_info.user_image }}" class="menu-icon"
                                         alt="User Image" style="border: 2px solid #00a65a;">
                                {% elif user_info.login_status == 1 %}
                                    <img src="{{ MEDIA_URL }}{{ user_info.user_image }}" class="menu-icon"
                                         alt="User Image" style="border: 2px solid #ff0000;">
                                {% elif user_info.login_status == 2 %}
                                    <img src="{{ MEDIA_URL }}{{ user_info.user_image }}" class="menu-icon"
                                         alt="User Image" style="border: 2px solid #FFFF00;">
                                {% elif user_info.login_status == 3 %}
                                    <img src="{{ MEDIA_URL }}{{ user_info.user_image }}" class="menu-icon"
                                         alt="User Image" style="border: 2px solid #808080;">
                                {% endif %}
                                <div class="menu-info">
                                    <h4 class="control-sidebar-subheading">{{ user_info.username }}</h4>
                                </div>
                            </a>
                        </li>
                    {% endif %}
                {% endfor %}
            </ul>
            <!-- /.control-sidebar-menu -->
        </div>
    </aside>
    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>

    <!-- Loading-image -->
    <div id="loading-image"
         style="position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1050;display: none;overflow: hidden;background: rgba(0,0,0,0.3);">
        <img src="{% static 'spinner.svg' %}" style="position: relative; top: 40%; left: 50%">
    </div>

</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<script src="{% static 'AdminLTE/bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- PACE -->
<script src="{% static 'AdminLTE/bower_components/PACE/pace.min.js' %}"></script>

{% block js %}

{% endblock %}

<!-- SlimScroll -->
<script src="{% static 'AdminLTE/bower_components/jquery-slimscroll/jquery.slimscroll.min.js' %}"></script>
<!-- FastClick -->
<script src="{% static 'AdminLTE/bower_components/fastclick/lib/fastclick.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'AdminLTE/dist/js/adminlte.min.js' %}"></script>

<script>

    $(document).ajaxSend(function (event, request, url) {
        if (!(url.type in ['GET', 'get'])) {
            request.setRequestHeader('X-CSRFToken', '{{ csrf_token }}')
        }
    });

    /*

    $(document).ajaxStart(function () {
        let path = window.location.pathname;
        if (path.indexOf('role_detail') === -1 && path.indexOf('system_log') === -1 && path.indexOf('monitor') === -1) {
            $('#loading-image').show();
        } else {
            // pass
        }
    });


    $(document).ajaxComplete(function () {
        $('#loading-image').hide();
    });

    */

    <!-- 固定标签 -->
    let pathname = window.location.pathname;

    $("li a").each(function () {
        let href = $(this).attr("href");
        if (pathname === href) {
            $(this).parents("ul").parent("li").addClass("active");
            $(this).parent("li").addClass("active");
        }
    });


    <!-- 生成面包屑和h1标题，并取消固定界面的面包屑 -->
    $(".treeview-menu li a").each(function () {
        if (pathname === '/') {
            $('.content-header h1').text('仪表盘');
            $('.content-header ol').remove();
        } else if (hide_header()) {
            $('.content-header ol').remove();
        } else {
            let href = $(this).attr("href");
            if (pathname === href) {
                let current_name = $(this).text();
                let pre_name = $(this).parent('li').parent('ul').prev('a').text();
                $('.content-header h1').text(current_name);
                $('.content-header ol li:eq(1)').text(pre_name);
                $('.content-header ol li:last').text(current_name);
            }
        }
    });

    function hide_header() {
        let paths = ['wiki_view', 'wiki_edit', 'wiki_search', 'playbook_info', 'role_detail', 'role_add', '/deploy/', 'rollback', 'system_log', 'monitor'];

        for (let item of paths) {
            if (pathname.indexOf(item) !== -1) {
                return true
            }
        }
    }
</script>

</body>
</html>
